<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../src/css/public.css">
    <title id="title">还款详情</title>
    <style type="text/css">
    	#details{color: #5a5a5a;font-size: 0.3rem;}
    	.details-tips{min-height: 3.66rem;background: #fff;width: 100%;padding-left: 0.3rem;}
    	.details-item{height: auto;background: #fff;margin: 0.2rem auto;}
    	.details-footer{height: 1.03rem;background: #5297d8;position: fixed;bottom: 0;left: 0;width: 100%;color: #f5f5f5;font-size: 0.32rem;}
    	.details-foot-right{height: 100%;}
    	.details-tips-head{height: 1.84rem;}
    	.details-tips-head-left{padding-top: 0.2rem;width: 3rem;}
    	.details-tips-time{min-height: 0.97rem;font-size: 0.3rem;}
    	.details-tips-order{height: 0.97rem;font-size: 0.3rem;}
    	.details-item-list{height: 1rem;font-size:0.3rem;}
    	.xiaofei{padding: 0.25rem 0.2rem;background: #60c849;border-radius: 12px;color: #fff;margin-left: 0.34rem;margin-right: 0.2rem;line-height: 0;}
    	.huankuan{padding: 0.25rem 0.2rem;background: #ead24e;border-radius: 12px;color: #fff;margin-left: 0.34rem;margin-right: 0.2rem;line-height: 0;}
    	.details-text{font-size: 0.5rem;color: #000;margin-top: 0.6rem;}
    </style>
</head>
<body>
	<div id="details">
		<div class="details-tips">
			<div class="details-tips-head border flex flex-align-center">
				<div class="details-tips-head-left">
					<p style="font-size: 0.3rem;">账单金额(元)</p>
					<p class="details-text">15030.51</p>
				</div>
				<div class="details-tips-head-left">
					<p style="font-size: 0.3rem;">保证金(元)</p>
					<p class="details-text">12000.00</p>
				</div>
				<div class="details-tips-head-left">
					<p style="font-size: 0.3rem;">手续费(元)</p>
					<p class="details-text">32</p>
				</div>
			</div>
			<div class="details-tips-order flex flex-align-center border">
				<p>还款笔数(笔)：<span style="color: #000;font-size: 0.38rem;">12</span></p>
			</div>
			<div class="details-tips-time border flex flex-align-center">
				<p>还款日期分别为</p>
				<div style="margin-left: 0.2rem;"><p class="p-time-auto">1月10日、1月10日</p></div>
			</div>
			<div class="details-tips-order flex flex-align-center">
				<p>订单号：J20180110027897667</p>
			</div>
		</div>
		<!-- 还款消费list-->
		<div class="details-item">
			<div class="details-item-list border flex flex-align-center">
				<div class="flex flex-align-center flex-1" style="color: #5297d8;margin-left: 0.34rem;">
					<i class="icon iconfont icon-calendar" style="margin-right: 0.05rem;"></i>
					<p>01-10</p>
				</div>
				<p style="margin-right: 0.3rem;">还款:2645.00元 | 消费:2660.55元</p>
			</div>
			<div class="details-item-list border flex flex-align-center">
				<div class="flex flex-align-center flex-1">
					<div class="xiaofei">消费</div>
					<p>18:24</p>
					<p style="margin-left: 0.2rem;color: #000;">2660.55元</p>
				</div>
				<i class="icon iconfont icon-shizhong" style="margin-right: 0.3rem;color: #ead24e;font-size: 0.36rem;"></i>
			</div>
			<div class="details-item-list border flex flex-align-center">
				<div class="flex flex-align-center flex-1">
					<div class="huankuan">还款</div>
					<p>18:24</p>
					<p style="margin-left: 0.2rem;color: #000;">2660.55元</p>
				</div>
				<i class="icon iconfont icon-shizhong" style="margin-right: 0.3rem;color: #ead24e;font-size: 0.36rem;"></i>
			</div>
		</div>
			<div class="details-item">
			<div class="details-item-list border flex flex-align-center">
				<div class="flex flex-align-center flex-1" style="color: #5297d8;margin-left: 0.34rem;">
					<i class="icon iconfont icon-calendar" style="margin-right: 0.05rem;"></i>
					<p>01-10</p>
				</div>
				<p style="margin-right: 0.3rem;">还款:2645.00元 | 消费:2660.55元</p>
			</div>
			<div class="details-item-list border flex flex-align-center">
				<div class="flex flex-align-center flex-1">
					<div class="xiaofei">消费</div>
					<p>18:24</p>
					<p style="margin-left: 0.2rem;color: #000;">2660.55元</p>
				</div>
				<i class="icon iconfont icon-yiwancheng" style="margin-right: 0.3rem;color: #5297d8;font-size: 0.36rem;"></i>
			</div>
			<div class="details-item-list border flex flex-align-center">
				<div class="flex flex-align-center flex-1">
					<div class="xiaofei">消费</div>
					<p>18:24</p>
					<p style="margin-left: 0.2rem;color: #000;">2660.55元</p>
				</div>
				<i class="icon iconfont icon-yishixiao" style="margin-right: 0.3rem;color: #ccc;font-size: 0.36rem;"></i>
			</div>
			<div class="details-item-list border flex flex-align-center">
				<div class="flex flex-align-center flex-1">
					<div class="huankuan">还款</div>
					<p>18:24</p>
					<p style="margin-left: 0.2rem;color: #000;">2660.55元</p>
				</div>
				<i class="icon iconfont icon-error" style="margin-right: 0.3rem;color: red;font-size: 0.32rem;"></i>
			</div>
		</div>
		<!--底部footer-->
		<div style="height: 1.03rem;"></div>
		<div class="details-footer flex flex-align-center flex-pack-center">
			<div class="details-foot-left flex flex-1 flex-align-center flex-pack-center"><p>重新生成</p></div>
			<div class="details-foot-right flex flex-1 flex-align-center flex-pack-center" style="border-left: solid 1px #f5f5f5;">
				<p>下一步</p>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../src/js/libs/rem.js"></script>
<script type="text/javascript" src="../src/js/libs/jquery.min.js"></script>
<script type="text/javascript" src="../src/js/libs/fastclick.js"></script>
<script type="text/javascript">
	$('.confirm').click(function(){
		Public.setDate({
				"method": "preview.plan",
				"version": "1.0.2",
				"userId": 2003,
				"bundCardId": 4,
				"reDates": "2018-01-12,2018-01-13,2018-01-14,2018-01-15,2018-01-16,2018-01-17,2018-01-18,2018-01-19,2018-01-20,2018-01-21",
				"totalAmont": 520000
		},function(){
			
		});
	});
</script>
